<template>
	<view>
		<!-- <u-card :sub-title="subTitle"> -->
		<u-card v-for="(item,index) in dataList" :key="index">
			<view slot="head" class="color-blue">
				<text class="fontSize">{{item.month}}</text>
				<text>{{item.year}}</text>
			</view>
			<view slot="body">
				<view style="padding: 10rpx 0;font-weight: 500;color: #909399;">
					{{item.subTitle}}
				</view>
				<view class="u-body-item u-flex u-row-between">
					<view class="u-body-item-title u-line-2">{{item.amount}}</view>
					<u-icon name="arrow-right" color="#a0cfff" size="28" @click="detailed(item)"></u-icon>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
					id: '1',
					subTitle: '实发工资（元）：',
					amount: '￥8,017.50',
					month: '12',
					year: '月 / 2020'
				}, {
					id: '2',
					subTitle: '实发工资（元）：',
					amount: '￥8,017.50',
					month: '11',
					year: '月 / 2020'
				}, {
					id: '3',
					subTitle: '实发工资（元）：',
					amount: '￥8,017.50',
					month: '10',
					year: '月 / 2020'
				}]
			}
		},
		methods: {
			detailed(row) {
				console.log(row)
				uni.navigateTo({
					url: '/pages/Finance/wages/WagesDetailed'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-card {
		background-color: #f0f4f7;
	}

	.u-body-item {
		font-size: 46rpx;
		color: #333;
		font-weight: 500;
	}

	// 文字颜色
	.color-blue {
		color: #a0cfff;
	}

	// 字体大小
	.fontSize {
		font-size: 40rpx;
	}

	// 背景灰
	.background-gray {
		background-color: #f2f1f5;
	}
</style>
